Catalog
  1. 1. CSS Reset的原理
  2. 2. CSS Reset的方法
  3. 3. 能独立设计符合产品设计的CSS Reset
CSS Reset

CSS Reset的原理

想要了解css reset的原理首先得知道何为css, css(Cascading Style Sheets)层叠样式表,那么何为层叠呢?

层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程。其实css的样式来源有5个,程序可修改的只有其中3个。
如下图所示:
css

层叠是css的核心机制,按照优先级高低顺序进行叠加覆盖得出最终的样式。同一个选择器,有不同来源的多个样式,不同的属性会合并,相同的后者覆盖前者,除了一个特殊情况!important它的优先级最高。
PS: !important使用场景,当引入某个js库修改了行内样式时无法对其进行修改可以用到它。

现在我们知道了,当你不设置任何样式时,页面会根据浏览器默认样式和用户自定义的样式(比如修改字体和字体大小)来展示,而且不同浏览器的默认样式还不一样,存在兼容性问题,而我们实际工作中需要按照设计师给的图在不同的地方表现都要一样,所以我们就需要把浏览器自带的样式都给重置掉,进行统一。

CSS Reset的方法

一般写一个简单的活动页面不需要用到很多的标签,最简单的粗暴的方法,直接设置

* {margin: 0;padding: 0;}

以及对字体,和一些用到的标签进行重置。但是要搭建一个完整的项目这样还是不太靠谱。

这里我推荐我所知道的几个css reset库,这些都是经过千锤百炼的,可以直接引用到项目当中去。

  • Normalize.css
    Normalize的核心理念是不盲目重置为0,让元素拥有统一的默认间距,大小等表现。
  • Neat.css
    Neat.css 解决的问题:解决Bug,特别是低级浏览器的常见Bug,统一效果,但不盲目追求重置为0,向后兼容,考虑响应式,考虑移动设备。

能独立设计符合产品设计的CSS Reset

往往在实际项目中,css reset并不单单只是清楚浏览器默认样式,还有对项目全局的定义,结合实际的项目和设计给的整套产品设计图来定制,把里面的大多数情况进行一个全局定义,比如页面大多数文字都是14px、颜色为#333、输入框placerholder颜色、移动端去掉点击效果、设置图标字体等等…

Author: 匡凡
Link: https://kuangfan.github.io/2019/12/16/css/css%20reset/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Donate
  • 微信
  • 支付宝